<template>
  <view>
    <view class="page" style="padding-bottom: 0;margin-bottom: 0;">
      <view class="sbbh" style="margin-bottom: 0;">
        <view class="sbbh-l"> 租赁企业</view>
        <view class="sbbh-r">
          <view class="inp" @tap="showQySelctFn()">{{ qyName }}</view>
          <u-icon name="arrow-right" color="#999" size="16"></u-icon>
        </view>
      </view>
    </view>

    <view class="page"
          v-if="selectQy.enterpriseId"
          style="padding-bottom: 120rpx">

      <template v-for="(item,index) in reqForm.feApartmentCancelDetailGroupList">
        <view style="display: flex;justify-content: space-between;align-items: center">
          <view class="info-tit">
            编号：{{ item.leaseNum }}
          </view>
          <view class="r-unit">
            类型：{{ item.leaseModel }}
          </view>
        </view>
        <view class="show-panel" style="border-radius: 12rpx 12rpx 0 0;margin-bottom: 0;">
          <view class="show-col" v-if="item.leaseModel=='按面积'">
            <text class="show-col-l">退租面积(㎡)</text>
            <view class="show-col-r">
              <input v-model="item.refundArea" placeholder="请填写退租面积" type="text"
                     placeholder-class="placeholder"/>
            </view>
          </view>
          <view class="table-col table-tit">
            <view class="table-col-c" style="width: 38%">房源编号</view>
            <view class="table-col-c" style="width: 26%">费用合计</view>
            <view class="table-col-c" style="width: 18%">保证金</view>
            <view class="table-col-c" style="width: 18%"></view>
          </view>
          <view class="table-col" v-for="(item2,index2) in item.feApartmentCancelDetailList" :key="index2"
                @click="showHouseEditFn(item2)">
            <view class="table-col-c" style="width: 38%">{{ item2.roomCode }}</view>
            <view class="table-col-c" style="width: 26%">
              <input v-model="item2.detailTotal" placeholder="请填写" type="number"
                     placeholder-class="placeholder" disabled/>
            </view>
            <view class="table-col-c" style="width: 18%">
              <input v-model="item2.margin" placeholder="请填写" type="number"
                     placeholder-class="placeholder" disabled/>
            </view>
            <view class="table-col-c" style="width: 18%">
              <u-icon name="arrow-right" color="#999" size="16" class="ml"></u-icon>
            </view>
          </view>
        </view>
        <view class="add-house" @click="houseChooseFn(item,index)">
          <view class="add-house-c">
            <u-icon name="plus" color="#44D94B" size="16" class="mr addicon"></u-icon>
            <text>添加/取消房源</text>
          </view>
        </view>

      </template>

      <view style="display: flex;justify-content: center;align-items: center">
        <view class="info-tit">
          退租金额总计
        </view>
      </view>


      <template>
        <view class="show-panel">

          <!--          <view class="show-col">-->
          <!--            <text class="show-col-l">租赁模式</text>-->
          <!--            <view class="show-col-r" @click="LeaseTypeSelect.show=true">-->
          <!--              <text>{{ reqForm.leaseMode ? reqForm.leaseMode : '请选择租赁模式' }}</text>-->
          <!--              <u-icon name="arrow-right" color="#999" size="16" class="ml"></u-icon>-->
          <!--            </view>-->
          <!--          </view>-->

          <!--          <view class="show-col">-->
          <!--            <text class="show-col-l">合同总面积 (m²)</text>-->
          <!--            <view class="show-col-r">-->
          <!--              <input v-model="reqForm.contractArea" placeholder="请填写面积" type="number"-->
          <!--                     placeholder-class="placeholder"/>-->
          <!--            </view>-->
          <!--          </view>-->

          <view class="show-col">
            <text class="show-col-l">租金合计(元)</text>
            <view class="show-col-r">
              <input v-model="reqForm.rentalTotal" placeholder="请填写租金" type="number"
                     placeholder-class="placeholder"/>
            </view>
          </view>

          <view class="show-col">
            <text class="show-col-l">物业费合计 (元)</text>
            <view class="show-col-r">
              <input v-model="reqForm.propertyTotal" placeholder="请填写物业费" type="number"
                     placeholder-class="placeholder"/>
            </view>
          </view>

          <view class="show-col">
            <text class="show-col-l">水电气费用合计(元)</text>
            <view class="show-col-r">
              <input v-model="reqForm.electricFee" placeholder="请填写水电气费用" type="number"
                     placeholder-class="placeholder"/>
            </view>
          </view>

          <view class="show-col">
            <text class="show-col-l">设施赔偿费合计(元)</text>
            <view class="show-col-r">
              <input v-model="reqForm.facilityNoun" placeholder="请填写设施赔偿费" type="number"
                     placeholder-class="placeholder"/>
            </view>
          </view>

        </view>

        <view class="show-panel">
          <view class="show-col">
            <text class="show-col-l">账单总计 (元)</text>
            <view class="show-col-r">
              <input v-model="reqForm.total" placeholder="请填写价格" type="number"
                     placeholder-class="placeholder"/>
            </view>
          </view>

          <view class="show-col">
            <text class="show-col-l">保证金总计(元)</text>
            <view class="show-col-r">
              <input v-model="reqForm.marginTotal" placeholder="请填写保证金" type="number"
                     placeholder-class="placeholder"/>
            </view>
          </view>
        </view>

        <view class="show-panel">
          <view class="show-col">
            <text class="show-col-l">退租日期</text>
            <view class="show-col-r" @click="showEndDate=true">
              <text>
                {{
                  reqForm.endTime || `请选择退租日期`
                }}
              </text>
              <u-icon name="arrow-right" color="#999" size="16"></u-icon>
            </view>
          </view>
        </view>

        <view class="show-panel">
          <view class="show-col">
            <text class="show-col-l">备注</text>
            <view class="show-col-r">
              <input v-model="reqForm.remark" placeholder="请填写备注" type="text"
                     placeholder-class="placeholder"/>
            </view>
          </view>
        </view>

      </template>


      <view class="xb-bottom-btn" hover-class="button-hover" @click="submitFn">
        确认
      </view>

    </view>

    <view class="bh-select" v-show="showQySelect">
      <view class="select_scroll">
        <view class="select_list_col" v-for="item in dataList" :key="item.id" @click="qyItemCheck(item)">
          <view class="select_list_col_l">
            <view class="select_list_col_l_l"
                  :style="selectQy.enterpriseName==item.enterpriseName?'background:#44D94B;border:none':''"></view>
            <view class="select_list_col_l_r">
              <view class="b-l">
                <text v-if="item.enterpriseName">{{ item.enterpriseName }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="xb-bottom-btn" hover-class="button-hover" @click="showQySelect = false">
        取消
      </view>

    </view>

    <u-calendar v-model="showEndDate" mode="date" max-date="2100" @change="endDateFn"></u-calendar>


    <u-popup v-model="showHousePop" mode="bottom" length="70%" closeable>
      <view class="pop-box" v-if="showHousePop">
        <view class="pop-box-top">
          <view class="pop-box-tit">选择房源</view>
        </view>
        <view class="pop-box-c">
          <scroll-view class="leasepop-scroll">
            <view class="real-select-col" v-for="(item) in roomList" :key="item.roomCode" @click="houseItemCheck(item)">
              <view class="real-select-l">
                <view class="check-circle" :style="item.select?'background:#44D94B;border:none':''">
                  <u-icon name="checkmark" color="#fff" style="margin-top: 4rpx;"></u-icon>
                </view>
              </view>
              <view class="real-select-r">
                <view class="real-select-r-t">
                  {{ item.roomCode }}
                </view>
                <view class="real-select-r-b">
                  <text>面积： {{ item.builtUpArea }}㎡</text>
                  <text>类型：{{ item.capacity }}</text>
                </view>
              </view>
            </view>
          </scroll-view>

        </view>

        <view class="xb-bottom-btn" hover-class="button-hover" @click="showHousePop=false">
          确认
        </view>
      </view>
    </u-popup>

    <u-popup v-model="showHouseEditPop" mode="bottom" length="70%" closeable>
      <view class="pop-box" v-if="selectHouse">
        <view class="pop-box-top">
          <view class="pop-box-tit">修改房源信息</view>
        </view>

        <view class="show-panel" style="margin-top: 110rpx">
          <view class="show-col">
            <text class="show-col-l">房源编号</text>
            <view class="show-col-r">
              {{ selectHouse.roomCode }}
            </view>
          </view>

        </view>

        <view class="show-panel">
          <view class="show-col">
            <text class="show-col-l">租金(元)</text>
            <view class="show-col-r">
              <input v-model="selectHouse.rental" placeholder="请填写金额" type="number"
                     placeholder-class="placeholder"/>
            </view>
          </view>

          <view class="show-col">
            <text class="show-col-l">物业费 (元)</text>
            <view class="show-col-r">
              <input v-model="selectHouse.property" placeholder="请填写金额" type="number"
                     placeholder-class="placeholder"/>
            </view>
          </view>

          <view class="show-col">
            <text class="show-col-l">水电气费用 (元)</text>
            <view class="show-col-r">
              <input v-model="selectHouse.electricFee" placeholder="请填写金额" type="number"
                     placeholder-class="placeholder"/>
            </view>
          </view>

          <view class="show-col">
            <text class="show-col-l">设施赔偿费 (元)</text>
            <view class="show-col-r">
              <input v-model="selectHouse.facilityNoun" placeholder="请填写金额" type="number"
                     placeholder-class="placeholder"/>
            </view>
          </view>
        </view>

        <view class="show-panel">
          <view class="show-col">
            <text class="show-col-l">保证金 (元)</text>
            <view class="show-col-r">
              <input v-model="selectHouse.margin" placeholder="请填写金额" type="number"
                     placeholder-class="placeholder"/>
            </view>
          </view>
        </view>

        <view class="xb-bottom-btn" hover-class="button-hover" @click="houseEditOk">
          确认
        </view>
      </view>
    </u-popup>

    <postSuccess v-if="showSuccess">
      <view slot="txt" class="suc-btnbox">
        <!--        <view @click="navToDetails">查看提交信息</view>-->
        <!--        <view @click="chaoAway">继续抄表</view>-->
      </view>
    </postSuccess>

  </view>


</template>

<script>
import {Decimal} from "decimal.js"

export default {
  name: "leaseRefund",
  data() {
    return {
      showSuccess: false,
      showEndDate: false,
      showHousePop: false,
      showHouseEditPop: false,
      showQySelect: false,
      dataList: [],
      roomList: [],
      selectQy: {},
      selectHouse: null,
      downOption: {
        page: {
          num: 0,
          size: 10,
          time: null,
        },
        auto: false, //是否在初始化后,自动执行downCallback; 默认true
      },
      LeaseTypeSelect: {
        show: false,
        val: '',
        list: [
          {
            value: '按间',
            label: '按间'
          },
          {
            value: '按面积',
            label: '按面积'
          }
        ],
      },
      feLeases: [],
      selectLeaseObj: null,
      reqForm: {
        "approval": "",
        "contractArea": 0,
        "createBy": "",
        "createTime": "",
        "electricFee": 0,
        "endTime": this.$u.timeFormat(Date.now()),
        "enterpriseId": "",
        "facilityNoun": 0,
        "feApartmentCancelDetailGroupList": [],
        "id": "",
        "marginTotal": 0,
        "params": {},
        "propertyTotal": 0,
        "remark": "",
        "rentalTotal": 0,
        "searchValue": "",
        "sysBmCode": "",
        "sysBmId": 0,
        "total": 0,
        "updateBy": "",
        "updateTime": ""
      }
    }
  },
  computed: {
    // 企业名称
    qyName() {
      return this.selectQy.enterpriseName || '请先选择企业'
    }
  },
  watch: {
    "reqForm.feApartmentCancelDetailGroupList": {
      handler(newval) {
        // 水电费合计
        let sdAll = new Decimal('0')
        // 物业费合计
        let wyAll = new Decimal('0')
        // 设施费合计
        let sheShiAll = new Decimal('0')
        // 租金合计
        let zjAll = new Decimal('0')
        // 保证金
        let bzj = new Decimal('0')
        // 账单总计
        let totalf = new Decimal('0')
        newval.forEach(item => {
          let feApartmentCancelDetailList = item.feApartmentCancelDetailList
          feApartmentCancelDetailList.forEach(item2 => {
            sdAll = sdAll.add(new Decimal(item2.electricFee || 0))
            wyAll = wyAll.add(new Decimal(item2.property || 0))
            sheShiAll = sheShiAll.add(new Decimal(item2.facilityNoun || 0))
            zjAll = zjAll.add(new Decimal(item2.rental || 0))
            bzj = bzj.add(new Decimal(item2.margin || 0))
            totalf = totalf.add(new Decimal(item2.detailTotal || 0))
          })
        })
        this.reqForm.electricFee = sdAll.toNumber().toFixed(2)
        this.reqForm.propertyTotal = wyAll.toNumber().toFixed(2)
        this.reqForm.facilityNoun = sheShiAll.toNumber().toFixed(2)
        this.reqForm.rentalTotal = zjAll.toNumber().toFixed(2)
        this.reqForm.marginTotal = bzj.toNumber().toFixed(2)
        this.reqForm.total = totalf.toNumber().toFixed(2)
      },
      deep: true
    }
  },
  onLoad() {
    this.apis.lifeApi
        .leaseEnList()
        .then((res) => {
          this.dataList = res.data;
        });
  },
  methods: {
    endDateFn(e) {
      let date = e.result
      this.reqForm.endTime = date
    },
    showQySelctFn() {
      this.showQySelect = true;
    },
    showHouseEditFn(item) {
      this.selectHouse = item
      this.showHouseEditPop = true
    },
    houseEditOk() {
      let house = this.selectHouse
      let num = parseFloat(house.property || 0) + parseFloat(house.rental || 0) + parseFloat(house.electricFee || 0) + parseFloat(house.facilityNoun || 0)
      house.detailTotal = num
      this.showHouseEditPop = false
    },
    getQyLease() {
      this.feLeases = []
      this.reqForm.feApartmentCancelDetailGroupList = []
      this.apis.lifeApi
          .getGroupLeaseVO(this.selectQy.enterpriseId)
          .then((res) => {
            // 水电费合计
            let sdAll = new Decimal('0')
            // 物业费合计
            let wyAll = new Decimal('0')
            // 设施费合计
            let sheShiAll = new Decimal('0')
            // 租金合计
            let zjAll = new Decimal('0')
            // 保证金
            let bzj = new Decimal('0')
            // 账单总计
            let totalf = new Decimal('0')
            this.feLeases = res.data
            this.feLeases.forEach((item, index) => {
              item.feApartmentCancelDetailList.forEach((item2) => {
                let num = new Decimal(item2.property || 0)
                    .add(new Decimal(item2.rental || 0))
                    .add(new Decimal(item2.electricFee || 0))
                    .add(new Decimal(item2.facilityNoun || 0))
                item2.detailTotal = num.toNumber().toFixed(2)
                item2.select = true
                sdAll = sdAll.add(new Decimal(item2.electricFee || 0))
                console.log("sdAll", sdAll)
                wyAll = wyAll.add(new Decimal(item2.property || 0))
                sheShiAll = sheShiAll.add(new Decimal(item2.facilityNoun || 0))
                zjAll = zjAll.add(new Decimal(item2.rental || 0))
                bzj = bzj.add(new Decimal(item2.margin || 0))
                totalf = totalf.add(new Decimal(item2.detailTotal || 0))
              })
              this.reqForm.feApartmentCancelDetailGroupList.push(this.$u.deepClone(item))
            })
            this.reqForm.electricFee = sdAll.toNumber().toFixed(2)
            this.reqForm.propertyTotal = wyAll.toNumber().toFixed(2)
            this.reqForm.facilityNoun = sheShiAll.toNumber().toFixed(2)
            this.reqForm.rentalTotal = zjAll.toNumber().toFixed(2)
            this.reqForm.marginTotal = bzj.toNumber().toFixed(2)
            this.reqForm.total = totalf.toNumber().toFixed(2)
          })
          .catch(() => {
            //联网失败的回调,隐藏下拉刷新的状态
            this.mescroll.endErr();
          });
    },
    houseChooseFn(item, index) {
      this.selectLeaseObj = {
        index,
        val: item
      }
      this.roomList = this.feLeases[index].feApartmentCancelDetailList
      this.showHousePop = true
    },
    houseItemCheck(item) {
      let index = this.selectLeaseObj.index
      let rooms = this.reqForm.feApartmentCancelDetailGroupList[index].feApartmentCancelDetailList
      if (item.select) {
        item.select = false
        for (let i = 0; i < rooms.length; i++) {
          if (item.roomCode == rooms[i].roomCode) {
            rooms.splice(i, 1)
            break
          }
        }
      } else {
        item.select = true
        rooms.push(item)
      }
      rooms = []
    },
    qyItemCheck(item) {
      this.selectQy = item
      this.selectQy.enterpriseName = item.enterpriseName
      this.selectQy.enterpriseId = item.enterpriseId
      this.reqForm.enterpriseId = item.enterpriseId
      this.reqForm.enterpriseName = item.enterpriseName
      this.getQyLease()
      this.showQySelect = false;
    },
    submitFn() {
      this.apis.buildingApi.feApartmentCancel(this.reqForm).then(res => {
        if (res.code == 200) {
          this.showSuccess = true;
        } else {
          this.showToast(res.msg)
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.bh-select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;

  .wicon {
    padding-top: 2rpx;
    height: 100%;
    margin-left: 12rpx;
    @include flexCenter;
  }

  .select_list_col {
    box-sizing: border-box;
    padding: 0 52rpx 0 24rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 148rpx;
    background-color: #fff;
    border-radius: 12rpx;
    border-bottom: 1rpx solid #eeeeee;

    &:last-child {
      border: none;
    }

    .b-l {
      text {
        margin-right: 20rpx;
      }
    }

    .select_list_col_l {
      display: flex;
      align-items: center;

      .select_list_col_l_l {
        margin-right: 24rpx;
        width: 42rpx;
        height: 42rpx;
        border-radius: 50%;
        border: 1rpx solid #cecece;
      }

      .select_list_col_l_r {
        view:nth-child(1) {
          font-size: 28rpx;

          font-weight: 500;
        }

        view:nth-child(2) {
          margin-top: 6rpx;
          font-size: 24rpx;

          font-weight: 500;
          color: #666666;
        }
      }
    }

    .select_list_col_r {
      flex-shrink: 0;
      font-size: 24rpx;

      font-weight: 400;
      color: #666666;
    }
  }

  .bh-select-t {
    z-index: 9;
    width: 100%;
    height: 76rpx;
    background: #EFFFF0;
    display: flex;
    align-items: center;
    justify-content: center;

    .bh-select-t-c {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      font-weight: 500;
      color: #44D94B;

      .plus-icon {
        margin-right: 14rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40rpx;
        height: 40rpx;
        background: #44D94B;
        border-radius: 50%;
      }
    }
  }
}

.add-house {
  margin-bottom: 20rpx;
  width: 100%;
  height: 96rpx;
  background: #EFFFF0;
  opacity: 1;
  @include flexCenter();

  .add-house-c {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    font-weight: 500;
    color: #44D94B;

    .addicon {
      width: 42rpx;
      height: 42rpx;
      border: 2rpx solid #44D94B;
      border-radius: 50%;
      @include flexCenter();
    }
  }
}

.pop-box {
  position: relative;
  width: 100%;
  height: 100%;
  background: #f8f8f8;
  display: flex;
  flex-direction: column;

  .pop-box-top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 2;

    .pop-box-tit {
      width: 100%;
      height: 100rpx;
      background: #fff;
      @include flexCenter;
    }
  }

  .pop-box-c {
    width: 100%;
    flex: 1;
    padding-top: 114rpx;

    .leasepop-scroll {
      width: 100%;
      height: 100%;
      background: #f8f8f8;
      padding-bottom: 160rpx;
    }
  }

}

.real-select-col {
  width: 100%;
  height: 138rpx;
  position: relative;
  background: #fff;
  padding: 28rpx 24rpx;
  display: flex;

  &:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2rpx;
    transform: scaleY(0.5);
    background: #eee;
    content: "";
  }

  .real-select-l {
    display: flex;
    align-items: center;

    .check-circle {
      margin-right: 24rpx;
      width: 42rpx;
      height: 42rpx;
      border-radius: 50%;
      border: 1rpx solid #cecece;
      @include flexCenter();
    }
  }


  .real-select-r {
    flex: 1;
    height: 100%;

    .real-select-r-t {

    }

    .real-select-r-b {
      margin-top: 10rpx;
      display: flex;
      justify-content: space-between;

      text:nth-child(1) {
        font-size: 24rpx;
        font-weight: 500;
        color: #999999;
      }

      text:nth-child(2) {
        font-size: 24rpx;
        font-weight: 500;
        color: #999999;
      }
    }
  }

}
</style>
